{% comment %}
<!--
  Copyright (C) 2008 ZHENG Zhong <http://www.zhengzhong.net/>

  Created on 2008-08-15.
  $Id$
-->
{% endcomment %}

<div id="map" class="ajax_box">

  <!-- main _____________________________________________________________________________________-->
  
  <div class="main">
  
    {% if resto.latitude and resto.longitude %}
    
      <div id="{{map_id}}" style="width: 480px; height: 300px; border: 1px solid #BBBBBB;"></div>
    
      <script type="text/javascript">//<![CDATA[
      
        function refreshRestoMap() {
          if (GBrowserIsCompatible()) {
            var map = new GMap2(document.getElementById("{{map_id}}"));
            map.addControl(new GSmallMapControl());
            map.setCenter(new GLatLng({{resto.latitude}}, {{resto.longitude}}), 15);
            var point = new GLatLng({{resto.latitude}}, {{resto.longitude}});
            var marker = new GMarker(point);
            GEvent.addListener(
              marker,
              "click",
              function() {
                var markerInfo = "{{resto.name}} @({{resto.latitude}}, {{resto.longitude}})";
                marker.openInfoWindowHtml(markerInfo);
              }
            );
            map.addOverlay(marker);
          }
        }
      
        // TODO: how to call this function after refresh?
        refreshRestoMap();
      
      //]]></script>
    
    {% endif %}
    
    {% include "foodsnroses/ajax/ajax_error.html" %}
  
  </div><!--/.main-->
  
  {% if resto.is_manageable %}
  
    <!-- view ___________________________________________________________________________________-->
  
    <div class="view">
      {% if not resto.latitude or not resto.longitude %}
        <span class="na">This resto has no Geo location.</span>
      {% endif %}
      <div class="toggle_link">
        <a href="javascript:void(0);" onclick="toggleBox('#map');">[edit]</a>
      </div>
    </div><!--/.view-->
  
    <!-- edit ___________________________________________________________________________________-->
    
    <div class="edit hidden">
    
      <form id="update_map_form" class="form" action="." method="POST"
            onsubmit="return submitAjaxForm('#map', '#update_map_form');">
        <input type="hidden" name="ajax_box" value="map"/>
        <div>
          Latitude:
          <input style="width: 80px;" type="text" name="latitude" value='{{resto.latitude|default:""}}'/>
          /
          Longitude:
          <input style="width: 80px;" type="text" name="longitude" value='{{resto.longitude|default:""}}'/>
          <br/>
          <span class="help_text">
            Locate the resto in Google Maps, then copy and paste the following code into the
            location bar of your browser and press enter to get latitude and longitude:
            <br/>
            javascript:void(prompt('',gApplication.getMap().getCenter()));
          </span>
        </div>
        <div>
          <input class="button" type="submit" value="Update"/>
          <input class="button" type="button" onclick="toggleBox('#map');" value="Cancel"/>
          <span class="ajax_indicator hidden">
            <img src="{{static_}}/images/ajax_indicator.gif" alt="AJAX Indicator"/>
          </span>
        </div>
      </form>
    
    </div><!--/.edit-->

  {% endif %}

</div><!--/#map-->




